<template>
  <div class='infos'>
    <p class="title mb15">我是title</p>
    <p class="intro color-999 ft14 mb10"><span class="name">商品简介：</span><span>aaaa</span></p>

    <div class="sale-info bc-gray ft14 color-999 mb15">
      <p v-for="(item, index) in modelData" :key="index">
        <span v-for="(item1, index1) in item" :key="index1" :class="item1.class+' mr20'">
          <span>{{item1.label}}：</span>
          <span v-if="!item1.isRate" :class="'ml5 '+(item1.class2||'color-666')">测试值</span>
          <el-rate v-else disabled :value="4"></el-rate>
        </span>
      </p>
    </div>

    <div class="version-info ft14">
      <div v-for="(item, index) in modelData1" :key="index" class="mb10">
        <span class="color-666">{{item.label}}：</span>
        <div class="content">
          <span v-for="(opt, optIndex) in item.list" class="hover" :key="optIndex">{{opt}}</span>
        </div>
      </div>
      <div class="count-info mt5">
        <span class="color-666">数量：</span>
        <div class="content">
          <el-input-number :min="1" :max="10" label="描述文字"></el-input-number>
        </div>
      </div>
    </div>

    <div class="fee-box mt20">
      <el-radio label="1">含税费</el-radio>
      <el-radio label="2">不含税费</el-radio>
    </div>

    <div class="btn-box">
      <el-button type="danger" class="btn bc-red" @click="showBuyerInfo">立即购买</el-button>
      <el-button type="success" class="btn" @click="gotoPurchase">实单求购</el-button>
    </div>

    <SubmitInfo v-if="$store.state.dias.submitInfo.show" />
  </div>
</template>
<script>
import SubmitInfo from './dias/submitInfo'
export default {
  components: {SubmitInfo},
  name: "",
  data() {
    return {
      modelData:[
        [
          {prop:"",label:"编号",class:""},
          {prop:"",label:"销量",class:""},
          {prop:"",label:"价格",class:"ml-auto",class2:"color-red ft18"},
        ],[
          {prop:"",label:"评分数",class:""},
          {prop:"",label:"评分",class:"",isRate:true},
          {prop:"",label:"运费",class:"ml-auto"},
        ],
      ],

      modelData1:[
        {
          label:"型号",
          list:["RVV-4","RVV-4","RVV-4","RVV-4","RVV-4","RVV-4"]
        },{
          label:"颜色",
          list:["红色"]
        }
      ],


      info:{}
      
    };
  },
  methods: {
    gotoPurchase(){
      this.$router.push({path:"/purchase",query:{shopId:1}})
    },

    /**
     * @name 显示弹框
     */
    showBuyerInfo(){
      this.$store.state.dias.submitInfo.show=true
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.infos {
  flex: 1;
  margin: 0 30px;
  margin-bottom: 30px;

  .title{
    font-size: 18px;
    font-weight: 700;
  }
  .intro{
    display: flex;
    .name{
      min-width:75px;
    }
  }
  .sale-info{
    height: 90px;
    padding: 10px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    >p{
      display: inherit;

      >span{
        display: inherit;
        min-width: 120px;
      }
    }
  }
  .version-info{
    >div{
      display: flex;
      >span{
        display: inline-block;
        min-width: 50px;
      }
      .content{
        display: inherit;
        justify-content: space-between;
        flex-wrap: wrap;
        span{
          display: inline-block;
          width: 97px;
          text-align: center;
          line-height: 36px;
          box-sizing: border-box;
          border: 1px solid #f2f2f2;
          margin-right: 10px;
          margin-bottom: 10px;
        }
      }
    }
  }

  .btn-box{
    margin-top: 30px;
    .btn{
      border-radius: 0;
      width: 135px;
      margin-left: 50px;
    }
    .color-red{
      // border-color: red;
    }
  }
}
</style>